<template>
  <view class="order">
    <!-- 订单页的header部分包括规则说明和汽车的部分配置信息 -->
    <view class="header">
      <!-- 规则说明 -->
      <h3 class="shuoming">规则说明</h3>
      <!-- 汽车的部分配置信息 -->
      <view class="carinfo" v-for="item in carinfo" :key="item.pinpai">
        <!-- 跳转 -->
        <navigator @click="gotoxiangqing">
          <!-- 调取上一个页面的汽车图片 -->
          <image :src="item.image1" class="img"></image>
          <!-- 调取上一个页面的汽车品牌 -->
          <div class="pinpai">{{item.pinpai}}</div>
          <!-- 调取上一个页面的汽车结构/座位 -->
          <span class="size">{{item.size}}</span>
          <span class="jiantou">></span>
        </navigator>
      </view>
    </view>
    <!-- 订单页面的middle部分包括提车点和还车点以及提车和还车的时间,出行保障和优惠 -->
    <view class="middle">
      <view class="tiche">
        <!-- 提车点和提车时间 -->
        <view class="start">
          <view class="s-adress">
            南昌华东交通大学自主点 >
          </view>
          <view class="s-time">
            {{OrderMounth}}
          </view>
        </view>
        <!-- 还车点和还车时间 -->
        <view class="end">
          <view class="e-adress">
            {{address}}自助提车点 >
          </view>
          <view class="e-time">
            {{returnMounth}}
          </view>
        </view>
      </view>
      <!-- 出行保障部分 -->
      <view class="baozhang">
        <view class="title">
          <!-- 点击跳转到出行保障页面,无需传参 -->
          <navigator url="/subpkg/guarantee/guarantee">
            <h3 class=" chuxing">出行保障</h3>
            <span class="tixing">出行保障至多收取7天费用</span>
          </navigator>
        </view>
        <!-- 出行保障的四种方式,还未能实现点击效果以及传数据效果 -->
        <view class="neirong">
          <view class="label" :style="LabStyle1" @click="checkServe(50,'label1')">
            <h1 class="title">尊享服务</h1>
            <h1 class="h1">..............................</h1>
            <h1 class="h1">全额车损(含轮胎)</h1>
            <h1 class="h1">-</h1>
            <h1 class="h1">-</h1>
            <h1 class="price">￥50/天</h1>
          </view>
          <view class="label" :style="LabStyle2" @click="checkServe(90,'label2')">
            <h1 class="title">全程无忧</h1>
            <h1 class="h1">..............................</h1>
            <h1 class="h1">全额车损(含轮胎)</h1>
            <h1 class="h1">三者增至100万</h1>
            <h1 class="h1">乘客保障5万/位</h1>
            <h1 class="price">￥90/天</h1>
          </view>
          <!--  -->
          <view class="label" :style="LabStyle3" @click="checkServe(80,'label3')">
            <h1 class="title">尊享百万服务</h1>
            <h1 class="h1">..............................</h1>
            <h1 class="h1">全额车损(含轮胎)</h1>
            <h1 class="h1">三者增至100万</h1>
            <h1 class="h1">-</h1>
            <h1 class="price">￥80/天</h1>
          </view>
          <view class="label" :style="LabStyle4" @click="checkServe(70,'label4')">
            <h1 class="title">尊享驾乘守护</h1>
            <h1 class="h1">..............................</h1>
            <h1 class="h1">全额车损(含轮胎)</h1>
            <h1 class="h1">-</h1>
            <h1 class="h1">乘客保障5万/位</h1>
            <h1 class="price">￥70/天</h1>
          </view>
        </view>
        <!-- 优惠 -->
        <view class="youhui">
          <div class="div">优惠</div>
          <div class="zhekou">暂无可用优惠方案</div>
        </view>
      </view>
    </view>
    <!-- 订单的footer部分包括租车费用,租车须知和确认订单 -->
    <view class="footer">
      <!-- 租车费用 -->
      <view class="feiyong">
        <h3 class="h3">租车费用</h3>
        <view class="xiangqing">
          <h3 class="h3">租车费用</h3>
          <div class="jichufei">
            <h4 class="h4">车辆租赁及服务费</h4>
            <!-- 从后端获取车辆租赁和服务费,这只是确认样式 -->
            <span class="span">￥{{rentPrice}}</span>
          </div>
          <div class="zhengbeifei">
            <h4 class="h4">车辆整备费</h4>
            <!-- 车辆整备费都是20元固定的 -->
            <span class="span">￥20</span>
          </div>
          <!-- 优惠组合 -->
          <div class="youhuizuhe">
            <h3 class="h3">优惠组合</h3>
            <div class="fangan">
              暂无减免优惠
            </div>
          </div>
        </view>
      </view>
      <!-- 租车须知 -->
      <view class="xuzhi">
        <h3 class="h3">租车须知</h3>
        <div class="yajin">
          <h4 class="h4">租车押金、违章押金</h4>
          <label class="label">></label>
        </div>
        <div class="zhifu">
          <h4 class="h4">订单支付</h4>
          <span class="span">取消订单无需预约</span>
        </div>
        <!-- 退改设置了点击事件,点击会弹出窗口退改提醒 -->
        <div class="tuigai" @click="confirm">
          <h4 class="h4">退改规则</h4>
          <span class="span">今天19：00前可免费取消 ></span>
        </div>
      </view>
      <!-- 确认订单 -->
      <view class="jiezhang">
        <span class="quane">全额</span>
        <!-- 总金额=出行保障费用(可不选)+车辆租赁及服务费+车辆整备费 -->
        <span class="price">￥{{allPrice}}</span>
        <!-- 确认订单按纽 -->
        <button class="submit" @click="doOrder">确认订单</button>
      </view>
    </view>
    <!-- 退改规则的弹窗 -->
    <view class="uniappDemo">
      <!-- 弹框内容 -->
      <view class="uniappBox">
        <view :hidden="!uniappShowModel" class="uniappContant">
          <view class="uniappTitle">退改规则</view>
          <view class="uniappNotice">今天19：00前可免费取消，超时取消订单将收取订单全额30%作为违约金!!!</view>
          <!-- 确定按钮 -->
          <view class="uniappBtn">
            <view @tap="confirm2()">确定</view>
          </view>
        </view>
        <!-- 背景黑色蒙版 -->
        <view class="uniappBgdCol" :hidden="!uniappShowModel" @tap="uniappShowModel = false"></view>
      </view>
    </view>
  </view>
</template>

<script>
  import store from '@/store/index.js' //需要引入store
  export default {
    data() {
      return {
        LabStyle1: '', //高亮样式'background-color: yellow;'
        LabStyle: 'background-color: yellow;', //高亮样式'background-color: yellow;'
        LabStyle2: '',
        LabStyle3: '',
        LabStyle4: '',
        day: '', //租车天数
        currrentTime: '',
        id: '',
        vip: '',
        servePrice: 0, //服务价格
        address: '',
        rentPrice: 0, //租车一天金额
        allPrice: 0, //租车总金额
        OrderTime: '',
        returnMounth: '',
        detailTime: '',
        OrderMounth: '',
        // 设置弹窗默认不显示
        uniappShowModel: false,
        carinfo: [{
          image1: '../../static/k-on.jpg',
          pinpai: '本田凌派',
          size: '1.0T自动 | 三厢5座',
        }, ],
        pinpai: [{ pinpai: '本田凌派', }, ],
        peizhi: [{
          nengyuan: '汽油',
          pailiang: '1.0T自动',
          jiegou: '三厢轿车5座',
          ranyou: '92-93汽油',
          rongji: '40L',
          chemen: '4门',
          qingkuang: '无损坏情况',
        }, ],
      }
    },
    // 设置弹窗的js
    onLoad(option) {
      this.vip = parseInt(store.state.user.User_VIP)
      console.log('是否是vip:' + this.vip)
      this.carinfo[0].image1 = option.image
      this.id = option.id
      this.address = store.state.address
      this.day = store.state.days
      this.getTime()
      if (store.state.rentTime.length === 0 && store.state.returnTime.length === 0) {
        this.returnMounth = this.currrentTime
        this.OrderMounth = this.currrentTime

      } else if (store.state.rentTime.length !== 0 && store.state.returnTime.length === 0) {
        this.returnMounth = this.currrentTime
        this.OrderMounth = store.state.rentTime + this.detailTime
        // this.returnMounth = store.state.returnTime
      } else if (store.state.rentTime.length === 0 && store.state.returnTime.length !== 0) {
        this.returnMounth = store.state.returnTime + this.detailTime
        this.OrderMounth = this.currrentTime
      } else {
        this.returnMounth = store.state.returnTime + this.detailTime
        this.OrderMounth = store.state.rentTime + this.detailTime
      }
      this.carDetail2()



    },
    methods: {
      // 选择哪一种服务
      checkServe(price, label) {

        this.servePrice = price
        // 让当前元素高亮，其他不高亮
        if (label === 'label1') {
          this.LabStyle1 = this.LabStyle
          this.LabStyle2 = ''
          this.LabStyle3 = ''
          this.LabStyle4 = ''
        } else if (label === 'label2') {
          this.LabStyle2 = this.LabStyle
          this.LabStyle1 = ''
          this.LabStyle3 = ''
          this.LabStyle4 = ''
        } else if (label === 'label3') {
          this.LabStyle3 = this.LabStyle
          this.LabStyle1 = ''
          this.LabStyle2 = ''
          this.LabStyle4 = ''
        } else if (label === 'label4') {
          this.LabStyle4 = this.LabStyle
          this.LabStyle1 = ''
          this.LabStyle3 = ''
          this.LabStyle2 = ''
        }
        console.log(this.servePrice)
        this.computedAllPrice()
      },
      //提交
      confirm() {
        this.uniappShowModel = true
      },

      // 点击确定按钮模态框消失
      confirm2() {
        this.uniappShowModel = false
      },
      // 计算 总金额
      computedAllPrice() {
        // 1 指没有折扣价
        console.log('this.rentPrice:' + this.rentPrice)
        console.log('this.day:' + this.day)
        let discount = 1
        if (this.vip === 1) {
          discount = 0.9
        }
        if (this.servePrice !== 0 || this.servePrice !== '') {
          this.allPrice = this.day * this.rentPrice * discount + this.day * this.servePrice + 20
        } else {
          this.allPrice = this.day * this.rentPrice * discount + 20
        }
        console.log(this.allPrice)
      },
      // 获取 information 表的信息
      async carDetail() {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/carDetail',
          method: 'POST',
          data: { id: this.id },
          header: { 'Content-Type': 'application/x-www-form-urlencoded' },

        })
        if (res.status === 0) {
          // this.carinfo[0].pinpai = res.data.I_
        }
      },
      // 获取 car表的信息
      async carDetail2() {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/getCarById',
          method: 'POST',
          data: { id: this.id },
          header: { 'Content-Type': 'application/x-www-form-urlencoded' },

        })
        if (res.status === 0) {
          console.log(res)
          this.carinfo[0].pinpai = res.data.C_Brand
          this.carinfo[0].size = '1.0T自动 | 三厢' + res.data.C_Seat + '座'
          this.rentPrice = res.data.C_Price
          console.log('123:' + this.rentPrice)
          this.computedAllPrice()
        }
      },
      // 计算总价
      // 下单
      async doOrder() {
        console.log(parseInt(this.id))

        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/userOrder',
          method: 'post',
          data: {
            userName: store.state.user.User_Name,
            goodsPrice: this.allPrice,
            vipDiscount: 0, //0表示无折扣 1表示有折扣
            orderPiont: this.address,
            orderCar: parseInt(this.id),
            orderin: '0'
          },
          header: { 'Content-Type': 'application/x-www-form-urlencoded' }
        })
        // console.log(res)
        // 下单成功 提示下单成功 并跳转到主页面
        if (res.status === 0) {
          uni.showToast({
            title: '下单成功!',
            icon: 'none',
            duration: 2000,
            complete() {
              uni.switchTab({
                // 跳转到tabBar页面不能带参数?date=
                url: '/pages/home/home'
              })
            }
          })
          // console.log(res)

        }
        // 失败提示错误
      },
      // 获取当前时间函数
      getTime() {
        // console.log(this.padZero(6))
        const dt = new Date()
        // console.log((dt))

        const y = dt.getFullYear()
        // const m = padZero
        const m = this.padZero(dt.getMonth() + 1)
        const d = this.padZero(dt.getDate())

        const hh = this.padZero(dt.getHours())
        const mm = this.padZero(dt.getMinutes())
        const ss = this.padZero(dt.getSeconds())

        this.currrentTime = m + '月' + d + '日' + hh + ':' + mm
        this.detailTime = hh + ':' + mm
        // this.returnMounth = m + '月' + d + '日' + hh + ':' + mm
      },
      // 补零的函数
      padZero(n) {
        return n > 9 ? n : '0' + n
      },
      gotoxiangqing() {
        console.log('dingdan:' + this.id + '123' + this.carinfo[0].image1)
        uni.navigateTo({ url: `/subpkg/xiangqing/xiangqing?id=${this.id}&image=${this.carinfo[0].image1}` })
      }
    },
  }
</script>
<style>
  /* 整个header大盒子的css */
  .header {
    width: 750rpx;
    height: 200rpx;
    background-color: #fdc95c;
  }

  /* 规则说明的css */
  .header .shuoming {
    text-align: right;
    margin-right: 25rpx;
    font-size: 26rpx;
    font-weight: 700;
  }

  /* 汽车图片 css*/
  .carinfo .img {
    float: left;
    margin-left: 30rpx;
    margin-right: 20rpx;
    width: 200rpx;
    height: 125rpx;
  }

  /* 汽车品牌css */
  .carinfo .pinpai {
    float: left;
    width: 450rpx;
    height: 50rpx;
    font-size: 30rpx;
    font-weight: 700;
  }

  /* 汽车结构/座位的css */
  .carinfo .size {
    text-align: left;
    font-size: 30rpx;
    color: #917135;
  }

  /*右边小箭头的css */
  .carinfo .jiantou {
    float: right;
    margin-right: 25rpx;
    color: #917135;
  }

  /* middle的css */
  .middle {
    width: 720rpx;
    height: 888rpx;
  }

  /* 提车还车大盒子的css */
  .middle .tiche {
    width: 720rpx;
    height: 300rpx;
    margin: 15rpx;
    background-color: #ffffff;
  }

  /*提车地点的css  */
  .start .s-adress {
    margin-left: 100rpx;
    padding-top: 20rpx;
    font-size: 35rpx;
    font-weight: 700;
  }

  /* 提车时间的css */
  .start .s-time {
    margin-left: 100rpx;
    padding-top: 15rpx;
    font-size: 24rpx;
    font-weight: 700;
  }

  /* 还车与提车之间的间距 */
  .tiche .end {
    margin-top: 50rpx;
  }

  /* 还车的地点css */
  .end .e-adress {
    margin-left: 100rpx;
    padding-top: 20rpx;
    font-size: 35rpx;
    font-weight: 700;
  }

  /* 还车的时间css */
  .end .e-time {
    margin-left: 100rpx;
    padding-top: 15rpx;
    font-size: 24rpx;
    font-weight: 700;
  }

  /* 出行保障大盒子的css */
  .middle .baozhang {
    width: 720rpx;
    height: 450rpx;
    margin: 15rpx;
    background-color: #ffffff;
  }

  /* 出行保障标题盒子 */
  .baozhang .title {
    height: 450rpx;
    height: 75rpx;
  }

  /* 强制出行保障的内容在同一行显示 */
  .baozhang .neirong {
    overflow: auto;
    white-space: nowrap;
    text-align: center;
    margin-bottom: 20rpx;
  }

  /* 出行保障标题盒子左边内容css */
  .title .chuxing {
    display: inline-block;
    margin-left: 15rpx;
    padding-top: 30rpx;
    font-size: 35rpx;
    font-weight: 700;
  }

  /* 出行保障标题盒子右边内容css */
  .title .tixing {
    float: right;
    font-size: 26rpx;
    padding-top: 30rpx;
    margin-right: 15rpx;
    color: #bfbfbf;
  }

  /* 出行保障内容的css */
  .neirong .label {
    display: inline-block;
    margin-top: 20rpx;
    margin-left: 30rpx;
    width: 200rpx;
    height: 320rpx;
    border: 1rpx solid gray;
    border-radius: 15rpx;
    background-color: #ffffff;
  }

  /* 出行保障内容的方式css */
  .label .title {
    margin-top: 20rpx;
    height: 35rpx;
    font-size: 35rpx;
    color: #917135;
    text-align: center;
  }

  /* 出行保障内容说明的css */
  .label .h1 {
    font-size: 26rpx;
    margin-bottom: 10rpx;
    color: #228b22;
    text-align: center;
  }

  /* 出行保障的价格的css */
  .label .price {
    font-size: 30rpx;
    margin-bottom: 10rpx;
    color: #000000;
    font-weight: 700;
    text-align: center;
  }

  /* 优惠盒子css */
  .middle .youhui {
    width: 720rpx;
    height: 180rpx;
    margin-top: 30rpx;
    background-color: #ffffff;
  }

  /* 优惠标题css */
  .youhui .div {
    padding: 30rpx;
    font-size: 35rpx;
    font-weight: 700;
  }

  /* 优惠方案css */
  .youhui .zhekou {
    display: inline-block;
    color: #aeaeb0;
    width: 665rpx;
    height: 70rpx;
    padding-left: 15rpx;
    font-size: 30rpx;
    line-height: 70rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    background-color: #f9f9fb;
  }

  /* 整个租车费用大盒子css */
  .footer .feiyong {
    width: 720rpx;
    height: 520rpx;
    margin-top: 30rpx;
    margin-left: 15rpx;
    margin-right: 15rpx;
    background-color: #ffffff;
  }

  /* 租车费用大标题的css */
  .feiyong .h3 {
    margin-left: 30rpx;
    margin-bottom: 20rpx;
    padding-top: 30rpx;
    font-size: 35rpx;
    font-weight: 700;
  }

  /* 租车费用内容大盒子 */
  .feiyong .xiangqing {
    width: 680rpx;
    height: 400rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    background-color: #f9f9fb;
  }

  /* 租车费用小标题css */
  .xiangqing .h3 {
    display: inline-block;
    margin-left: 15rpx;
    padding-top: 30rpx;
    font-size: 30rpx;
    font-weight: 700;
  }

  /* 车辆租赁费及服务费盒子 */
  .xiangqing .jichufei {
    height: 80rpx;
  }

  /* 车辆租赁费及服务费的标题 */
  .jichufei .h4 {
    display: inline-block;
    margin-left: 15rpx;
    font-size: 26rpx;
    color: #9c9c9e;
    line-height: 80rpx;
  }

  /* 车辆租赁费及服务费的价格 */
  .jichufei .span {
    float: right;
    font-size: 30rpx;
    line-height: 80rpx;
    font-weight: 700;
  }

  /* 车辆整备费盒子 */
  .xiangqing .zhengbeifei {
    height: 80rpx;
  }

  /* 车辆整备费的标题 */
  .zhengbeifei .h4 {
    display: inline-block;
    margin-left: 15rpx;
    font-size: 26rpx;
    color: #9c9c9e;
    line-height: 80rpx;
  }

  /* 车辆整备费的价格 */
  .zhengbeifei .span {
    float: right;
    font-size: 30rpx;
    line-height: 80rpx;
    font-weight: 700;
  }

  /* 优惠组合方案css */
  .youhuizuhe .fangan {
    margin-left: 12rpx;
    font-size: 26rpx;
    color: #c6c6c8;
  }

  /* footer部分租车须知的盒子 */
  .footer .xuzhi {
    width: 720rpx;
    height: 380rpx;
    margin-top: 30rpx;
    margin-left: 15rpx;
    margin-right: 15rpx;
    background-color: #ffffff;
  }

  /* 租车押金,违章押金盒子*/
  .xuzhi .yajin {
    height: 80rpx;
    margin-bottom: 20rpx;
    background-color: #f9f9fb;
  }

  /* 订单支付盒子 */
  .xuzhi .zhifu {
    height: 80rpx;
    margin-bottom: 20rpx;
    background-color: #f9f9fb;
  }

  /* 退改规则的盒子 */
  .xuzhi .tuigai {
    height: 80rpx;
    margin-bottom: 20rpx;
    background-color: #f9f9fb;
  }

  /* 租车须知标题的css */
  .xuzhi .h3 {
    display: inline-block;
    margin-left: 15rpx;
    margin-bottom: 20rpx;
    padding-top: 30rpx;
    font-size: 35rpx;
    font-weight: 700;
  }

  /* 押金盒子左边租车押金,违章押金标题的css */
  .yajin .h4 {
    display: inline-block;
    margin-left: 30rpx;
    margin-top: 15rpx;
    font-size: 26rpx;
    font-weight: 700;
  }

  /* 押金盒子右边 小箭头的css*/
  .yajin .label {
    float: right;
    margin-right: 15rpx;
  }

  /* 订单支付盒子左边订单支付标题的css */
  .zhifu .h4 {
    display: inline-block;
    margin-left: 30rpx;
    line-height: 80rpx;
    font-size: 26rpx;
    font-weight: 700;
  }

  /* 订单支付盒子右边内容的css */
  .zhifu .span {
    display: inline-block;
    float: right;
    line-height: 80rpx;
    margin-right: 15rpx;
    font-size: 26rpx;
    font-weight: 700;
  }

  /* 退改规则盒子左边内容的css */
  .tuigai .h4 {
    display: inline-block;
    margin-left: 30rpx;
    line-height: 80rpx;
    font-size: 26rpx;
    font-weight: 700;
  }

  /* 退改规则盒子右边内容的css */
  .tuigai .span {
    display: inline-block;
    float: right;
    color: #c1c1c3;
    line-height: 80rpx;
    margin-right: 15rpx;
    font-size: 26rpx;
    font-weight: 700;
  }

  /* 确认订单盒子 */
  .jiezhang {
    width: 750rpx;
    height: 120rpx;
    background-color: #ffffff;
  }

  /* 确认订单价格的css */
  .jiezhang .price {
    display: inline-block;
    font-weight: 700;
    font-size: 40rpx;
    color: #f3870e;
    margin-top: 10rpx;
  }

  /* 确认订单全额的css */
  .jiezhang .quane {
    display: inline-block;
    font-size: 26rpx;
    margin-top: 10rpx;
    margin-left: 40rpx;
  }

  /* 确认订单按钮的css */
  .jiezhang .submit {
    float: right;
    display: inline-block;
    margin-right: 30rpx;
    font-size: 35rpx;
    font-weight: 700;
    text-align: center;
    width: 260rpx;
    height: 90rpx;
    background-color: #ffc65d;
  }

  /* 退改规则弹窗的css */
  .uniappBgdCol {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 99;
    -moz-opacity: 0.6;
    opacity: .6;
    filter: alpha(opacity=88);
  }

  /* 弹窗盒子的位置和样式 */
  .uniappContant {
    position: fixed;
    top: 370px;
    width: 100%;
    background-color: white;
    z-index: 100;
    border-radius: 10rpx;
  }

  /* 弹窗标题的样式 */
  .uniappTitle {
    display: flex;
    justify-content: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #161303;
    font-size: 30rpx;
    padding: 20rpx 0rpx;
    border-bottom: 2rpx solid #EEEEEE;
    ;
  }

  /* 弹窗内容提醒的css */
  .uniappNotice {
    font-size: 28rpx;
    color: #121212;
    display: flex;
    justify-content: center;
    padding: 40rpx;
  }

  /* 确定按钮的位置 */
  .uniappBtn {
    display: flex;
    justify-content: space-between;
  }

  /* 确定按钮的css */
  .uniappBtn view {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4% 0%;
    font-size: 28rpx;
  }

  .uniappBtn view:first-child {
    background-color: rgb(254, 250, 230);
    border-radius: 0rpx 0rpx 0rpx 10rpx;
  }

  .uniappBtn view:last-child {
    background-color: rgb(254, 209, 10);
    border-radius: 0rpx 0rpx 10rpx 0rpx;
  }
</style>